import React from 'react'
// 父组件在调用子组件的地方，添加自定义的属性，如果属性的值是变量，boolean类型，
// number类型，对象，数组，null，undefined, 函数，需要使用 {} 包裹

// 如果子组件是类组件，在子组件的内部，可以通过 this.props 访问到父组件传递的数据
// 如果子组件是函数式组件，函数拥有默认参数为props，可以通过 props 访问到父组件传递的数据

// 如果需要给子组件设置默认值
// 不管是类组件 还是 函数式组件，在定义组件之后，添加defaultProps属性即可
// 如果是类组件，还可以通过 类的静态属性 设置默认值

const Header = (props) => {
  console.log(props) // { name: 'React.js' }
  return (
    <header>{ props.name } 核心库只关注于视图层</header>
  )
}
Header.defaultProps = {
  name: 'React.js'
}

class Content extends React.Component {
  static defaultProps = { // 类的静态属性
    version: 16.8
  }
  render () {
    console.log(this.props) // {version: 16.8}
    return (
      <div>react { this.props.version } 推出了 react hooks!</div>
    )
  }
}
// Content.defaultProps = {
//   version: 16.8
// }

const Footer = ({ msg }) => { // 从props对象解构了msg
  return (
    <footer>react真的很{ msg }</footer>
  )
}
Footer.defaultProps = {
  msg: '简单'
}
class App extends React.Component {
  render () {
    return (
      <div>
        {/* <Header name="React.js"></Header>
        <Content version={ 16.8 }></Content>
        <Footer msg="简单"></Footer> */}
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
      </div>
    )
  }
}

export default App